<template>
    <view>
        <view class="tips">
            <view class="title">欢迎{{ isLogin ? '登录' : '注册'}}</view>
        </view>
        <u-form :model="userInfo" :rules="rules" ref="userFrom">
            <view class="container-input">
                <u-form-item prop="email">
                    <input placeholder="请输入账号" v-model="userInfo.email" placeholderStyle="color: #c0c4cc" style="height: 25px;"></input>
                </u-form-item>
            </view>
            <view v-show="isPassword"  class="container-input" style="margin-top: 40rpx;">
				<view class="eye-input" style="padding: 10px 0;">
					<input :password="pwdOpen" placeholder="请输入密码" v-model="userInfo.password" 
						placeholderStyle="color: #c0c4cc" style="height: 25px;padding-right: 64rpx;width: 100%;">
					</input>
					<view class="eye-image">
						<up-icon v-if="!eyeOpen && userInfo.password" name="eye-fill"  @click="tabEyeClose"></up-icon>
						<up-icon v-if="eyeOpen && userInfo.password" name="eye-off"  @click="tabEyeOpen"></up-icon>
					</view>
				</view>
            </view>
			<view v-show="!isPassword" class="yzm-input" style="margin-top: 40rpx;">
				<view class="eye-input" style="padding: 10px 16px;">
					<input  placeholder="请输入验证码" v-model="userInfo.code" 
						placeholderStyle="color: #c0c4cc" style="height: 25px;padding-right: 64rpx;width: 70%;">
					</input>
					</view>
					<view class="yzm">
					<up-button text="获取验证码" shape="circle" style="right: -40%;width: 30%;margin-top: -11%;" color="#5cd3bb"></up-button>
					</view>
			</view>
        </u-form>
            <view @click="goCode" v-show="isPassword" class="agree-title">
                <text style="font-size: 26rpx;color: #428AF6; margin: 16px 0 0 20px;" @click="agreement">验证码登录</text>
            </view>
			<view @click="goPassword" v-show="!isPassword" class="agree-title">
			    <text style="font-size: 26rpx;color: #428AF6; margin: 16px 0 0 20px;" @click="agreement">密码登录</text>
			</view>
		
        <view v-if="isLogin" class="container-bth" @click="login">登录</view>
		<view v-if="!isLogin" class="container-bth" @click="register">注册</view>
		<view class="flex-between" :style="{justifyContent: isLogin ? '' : 'flex-end'}" style="margin: 32rpx 40rpx 0 40rpx;">
			<view class="forget-pwd" @click="checkBtn">{{ !isLogin ? '立即登录?' : '立即注册?'}}</view>
			<view v-if="isLogin" class="forget-pwd" @click="forget">忘记密码?</view>
		</view>
    </view>
</template>
 
<script setup>
import { ref, reactive } from 'vue'

import { userLogin } from "@/api/login.js"
 
 const isPassword = ref(true)
 
 const isLogin = ref(true) 
 
 const radioShow = ref(true)
 
  const eyeOpen = ref(false) //密码是否可看
  
  const pwdOpen = ref(true)
  
    const userInfo = reactive({
          email: '',
          password: '',
		  code: ''
        });
		
		const rules = reactive({
			email: [
			        { required: true, message: '请输入电子邮箱', trigger: 'blur' },
			      ],
			      password: [
			        { required: true, message: '请输入密码', trigger: 'blur' },
			      ],
			      code: [
			        { required: true, message: '请输入验证码', trigger: 'blur' },
			      ]
		})
		
		const goCode = () => { // 切换到验证码登录
			isPassword.value = false
		}
		
		const goisPassword = () => { // 切换到密码登录
			isPassword.value = true
		}
		
		const tabEyeClose = () => { //切换可以观看密码
			eyeOpen.value = true
		}
		
		const tabEyeOpen = () => {
			eyeOpen.value = false
		}
    
        // 注册逻辑（参考证据[[1,5]]的验证流程）
        const register = () => {
          if (!radioShow.value) {
            toast.show('用户协议和隐私政策未勾选');
          } else if (!userInfo.username) {
            toast.show('请填写账号');
          } else if (!userInfo.password) {
            toast.show('请输入密码');
          } else {
            isLogin.value = true;
            userInfo.password = '';
            userInfo.username = '';
            setTimeout(() => {
              toast.show('注册成功');
            }, 500);
          }
        };
    
        // 登录逻辑
        const login = () => {
          userLogin(userInfo).then((res) => {
			  console.log('res', res)
			  if(res.code === 20000 ) {
				  const token = res.data.token
				  uni.setStorageSync('token', token)
				  
				  uni.switchTab({
				  	url:'/pages/home/index'
				  })
				  
				  setTimeout(() => {
					  uni.showToast({
					  	title:'登陆成功',
						icon:'success'
					  })
				  }, 500) 
			  }
		  }).catch((error) => {
        console.error('登录失败: ', error);
        uni.showToast({
          title: '登录失败',
          icon: 'none'
        });
      });
        };
    
        // 其他方法（参考证据[[4]]的状态管理）
        const checkBtn = () => {
          isLogin.value = !isLogin.value;
          userInfo.username = '';
          userInfo.password = '';
          eyeOpen.value = false;
          pwdOpen.value = true;
        };

</script>
 
<style>
	page {
		background: linear-gradient(270deg, #E1ECFE 0%, #DDFCFF 100%);
	}
</style>
 
<style lang="scss" scoped>
	.tips {
		margin: 110rpx 0 100rpx 0;
		width: 100%;
		text-align: center;
		.title {
			font-size: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			letter-spacing: 2rpx;
			color: #26344D;
		}
		.sub-title {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			letter-spacing: 2rpx;
			color: #26344D;
			margin-top: 10rpx;
		}
	}
	.container-input {
		margin: 0 40rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
		.eye-input {
			width: 100%;
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.eye-image {
				position: absolute;
				right: 0;
				width: 30rpx;
				height: 30rpx;
				margin-left: 20rpx;
				flex-shrink: 0;
			}
		}
	}
	.yzm-input {
		justify-content: space-around;
		margin: 0 40rpx;
			
		.eye-input {
			width: 65%;
			background-color: #fff;
			border-radius: 16rpx;
		}
		.yzm {
			margin-left: 10px;
		}
}
		.agree-title {
			margin-left: 20px;
			font-size: 26px;
			color: #333;
		}
	.container-bth {
		margin: 0 40rpx;
		border-radius: 16rpx;
		height: 88rpx;
		background-color: #5990F5;
		margin-top: 60rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
		line-height: 88rpx;
		letter-spacing: 2rpx;
	}
	.forget-pwd {
		font-size: 28rpx;
		font-family: MiSans-Regular, MiSans;
		color: #5990F5;
	}
	.flex-between {
		display: flex;
		justify-content:space-between;
	}
</style>